import { PageWrapper } from "@/components/PageWrapper";
import { Title } from "@/components/Title";
import { Input } from "antd";
import { useEffect, useState } from "react";
import styled from "styled-components";
import DragDemo from "./dragTest";
import CusDatePicker from "@/components/CusDatePicker";
import TreeMap from "./EchartsTest/treemap";

const Sspan = styled.p`
  text-align: center;
  margin: 0 auto;
  font-size: 13px;
`;

const TestPage = () => {
  const [text, setText] = useState("");

  // 处理文字字体大小设置
  const handleResolveFontSize = () => {
    const dom = document.getElementById("text");
    dom.style.fontSize = 13 + "px";
    let fontSizeLarger = 1;
    let total = 0;
    let enough = false;
    if (dom) {
      let h = dom.offsetHeight;
      // console.log(h, dom.style.fontSize);
      // return
      while (!enough && total < 87) {
        dom.style.fontSize =
          Number(dom.style.fontSize.slice(0, 2)) + fontSizeLarger + "px";
        // console.log(dom.style.fontSize);
        h = dom.offsetHeight;
        if (h > 240) {
          dom.style.fontSize =
            Number(dom.style.fontSize.slice(0, 2)) - fontSizeLarger + "px";
          enough = true;
        }
        // console.log(h, dom.style.fontSize);
        total += 1;
      }
    }
  };

  useEffect(() => {
    handleResolveFontSize();
  }, [text]);

  return (
    <PageWrapper narrow minWidth="1068px">
      <Title style={{ marginLeft: 16, marginBottom: 12 }}>测试页面</Title>
      <Input onChange={(e) => setText(e.target.value)} />
      {/* <CusDatePicker /> */}
      <div
        style={{
          width: 696,
          height: 264,
          color: "#fff",
          background: "grey",
          marginTop: 16,
          overflow: "hidden",
          padding: 12,
          display: "flex",
          alignItems: "center",
        }}
      >
        <Sspan id="text">{text}</Sspan>
      </div>
      <DragDemo />
      <TreeMap idName='treeMap' style={{width: 800, height: 600}} />
    </PageWrapper>
  );
};

export default TestPage;
